* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "KaiTi";
    text-decoration: none;
    list-style: none;
}
html,
body {
    width: 100%;
    min-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    background-color: rgba(200, 200, 200, 0.7);
    height: auto;
    min-height: 100vh;
    width: 80%;
    /* border: 1px solid black; */
    z-index: 999;
}
.background_img {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -999;
}
.background_img img {
    width: inherit;
    height: inherit;

}
.top {
    margin-top: 5px;
    width: 100%;
    height: 30px;
    /* border-bottom: 2px solid black; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.top .dog {
    font-size: 2rem;
}
.top .dog:hover {
    font-size: 2.1rem;
    border-bottom: 1px dashed gray;
}
.logosearchshelf {
    margin-top: 10px;
    /* border-bottom: 1px solid black; */
    width: 100%;
    /* height: 160px; */
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logosearchshelf .logo {
    height: 90px;
    width: 200px;
    border: 1px solid black;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.logosearchshelf .logo img {
    height: inherit;
    width: inherit;
}
.logosearchshelf .search {
    margin-left: -120px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    border-radius: 10px;
}
.logosearchshelf .search input {
    height: 45px;
    width: 230px;
    padding: 0 5px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.logosearchshelf .search button {
    margin-left: -2px;
    height: 45px;
    width: 70px;
    background-color: green;
    color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.logosearchshelf .search button:active {
    background-color: greenyellow;
}
.bookshelf {
    height: 50px;
    width: 80px;
    border: 1px solid black;
    line-height: 50px;
    text-align: center;
}
nav {
    padding: 0 30px;
}
nav > p {
    font-size: 24px;
}
.ulup {
    background-color: rgba(0, 0, 0, 0.5);
    /* color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
}
.ulup > div {
    width: 20%;
    height: 50px;
}
.ulup > ul {
    position: relative;
    width: 80%;
    height: 50px;
}
.ulup > ul li {
    position: absolute;
    width: calc(100% / 8);
    height: 50px;
}
.ulup > ul li:hover {
    transform: scale(1.1);
}
.ulup > ul li span:hover {
    color: #fff;
}
.ulup > ul li:nth-child(1) { left: 0%; }
.ulup > ul li:nth-child(2) { left: 12.5%; }
.ulup > ul li:nth-child(3) { left: 25%; }
.ulup > ul li:nth-child(4) { left: 37.5%; }
.ulup > ul li:nth-child(5) { left: 50%; }
.ulup > ul li:nth-child(6) { left: 62.5%; }
.ulup > ul li:nth-child(7) { left: 75%; }
.ulup > ul li:nth-child(8) { left: 87.5%; }
.si_box {
    margin-top: 5px;
    width: 100%;
    height: 300px;
    padding: 0 30px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
}
.left_nav {
    margin: 0 20px;
    height: inherit;
    width: 200px;
}
.left_nav ul {
    width: inherit;
    height: inherit;
}
.left_nav ul li {
    float: left;
    width: 50%;
    height: calc(100% / 7);
    line-height: 42px;
    background-color: rgba(245, 245, 245, 0.7);
}
.left_nav ul li:hover {
    transform: scale(1.1);
}

.left_nav ul li span {
    display: block;
    text-align: center;
}
.left_nav ul li:nth-child(3),.left_nav ul li:nth-child(4),
.left_nav ul li:nth-child(7),.left_nav ul li:nth-child(8),
.left_nav ul li:nth-child(11),.left_nav ul li:nth-child(12) {
    background-color: rgba(211, 211, 211, 0.7);
}
.carousel {
    border: 1px solid black;
    margin: 0 20px;
    height: inherit;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel ul {
    height: 300px;
    width: 100px;
    position: relative;
}
.carousel ul li {
    display: inline-block;
    position: absolute;
    background-color: rgba(211, 211, 211, 0.7);
    width: 100%;
    height: calc(100% / 5);
    font-size: 2rem;
    text-align: center;
    line-height: 60px;
}
.carousel ul li:nth-child(1) { top: 0%; }
.carousel ul li:nth-child(2) { top: 20%; }
.carousel ul li:nth-child(3) { top: 40%; }
.carousel ul li:nth-child(4) { top: 60%; }
.carousel ul li:nth-child(5) { top: 80%; }
.carousel .img {
    height: 300px;
    width: 300px;
    position: relative;
    overflow: hidden;
    transition: opacity 1s;
}
.carousel .img.active {
    opacity: 1;
}
.carousel .img img {
    height: 300px;
    width: 300px;
    position: absolute;
    object-fit: cover;
    animation: carouselAnimation 16s infinite;
}
.carousel .img img:nth-child(1) {top: 0px;}

.carousel .img img:nth-child(2) {top: 300px;}

.carousel .img img:nth-child(3) {top: 600px;}

.carousel .img img:nth-child(4) {top: 900px;}

.carousel .img img:nth-child(5) {top: 1200px;}

@keyframes carouselAnimation {
    0% { transform: translateY(0); }
    15% { transform: translateY(0); }
    20% { transform: translateY(-100%); }
    35% { transform: translateY(-100%); }
    40% { transform: translateY(-200%); }
    55% { transform: translateY(-200%); }
    60% { transform: translateY(-300%); }
    75% { transform: translateY(-300%); }
    80% { transform: translateY(-400%); }
    95% { transform: translateY(-400%); }
    100% { transform: translateY(0); }
}
.gitee {
    background-color: rgba(211, 211, 211, 0.7);
    border: 1px solid black;
    margin: 0 20px;
    height: inherit;
    width: 200px;
}
.gitee p {
    height: 30px;
    width: 100%;
    font-size: 20px;
    color: red;
    text-align: center;
    margin: 10px 0;
}
.gitee .gitImg {
    width: 190px;
    height: 190px;
    border: 5px black solid;
    border-radius: 10px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gitee .gitImg img {
    height: 170px;
    width: 170px;
    object-fit: cover;
}
.fenge {
    display: block;
    width: 100%;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    margin: 15px 0;
}
.books {
    /* border: 1px solid black; */
    margin-top: 5px;
    width: 100%;
    height: auto;
    padding: 0 30px;
    column-count: 4; /* 设置列数 */
    column-gap: 20px; /* 设置列间距 */
}
.abook {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    display: inline-block;
    width: 100%; /* 宽度设置为100%以确保每本书占据整列宽度 */
    margin-bottom: 20px; /* 设置书籍之间的垂直间距 */
    break-inside: avoid; /* 避免书籍在列中被拆分 */
}
.abook img {
    width: 100%;
    height: auto; /* 保持图片的宽高比 */
}

.info {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
}

.title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.type {
    font-size: 0.9em;
    color: #666;
}
/* @media (min-width: 576px) {
  .books {
    column-count: 2;
  }
}
  */
@media (min-width: 768px) {
    .books {
        column-count: 3; /* 中等屏幕设备，如桌面显示器 */
    }
}

@media (min-width: 992px) {
    .books {
        column-count: 4; /* 大屏幕设备 */
    }
}
footer {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-top: 20px;
}
footer a {
    color: #007bff;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}